<template>
  <div class="login-main">
    <div class="login-container">
      <p class="login-sys">老雷火锅管理系统登录</p>
      <p>
        <el-input
          prefix-icon="el-icon-user"
          placeholder="请输入用户名"
          v-model="username"
          clearable
        >
        </el-input>
      </p>
      <p>
        <el-input
          prefix-icon="el-icon-lock"
          placeholder="请输入密码"
          v-model="password"
          show-password
          clearable
        ></el-input>
      </p>

      <p style="position: relative">
        <span v-show="show" class="login-bad">×您的账户名或密码错误</span>
        <!-- <router-link to="/index/outindex"> -->
        <el-button type="primary" class="login-login" @click="loginuser"
          >登录</el-button
        >
        <!-- </router-link> -->
      </p>
    </div>
    <!-- ref="slideblock" vue设置dom容器的方式 -->
    <slide-verify
      ref="slideblock"
      v-show="showverify"
      class="verify"
      :l="42"
      :r="10"
      :w="301"
      :h="170"
      slider-text="向右滑动"
      @success="onSuccess"
      @fail="onFail"
      @refresh="onRefresh"
    ></slide-verify>
  </div>
</template>

<script>
// 解构对象接
import { login } from "../apis/user";
export default {
  data() {
    return {
      // 初始不显示验证码框
      showverify: false,
      username: "",
      password: "",
      show: false,
    };
  },
  methods: {
    // 监听验证码状态事件
    // 成功事件
    onSuccess() {
      // 验证成功,隐藏验证框
      this.showverify = false;
      // 获取容器并重置验证码
      this.$refs.slideblock.reset();
      this.$message({
        message: "恭喜你，滑动验证成功",
        type: "success",
      });
      // console.log(this.username, this.password);
      // 发送ajax获取请求
      login({ account: this.username, password: this.password }).then((res) => {
        // console.log(res);
        if (res.data.code == 0) {
          // console.log(res.data.id);
          // 将当前登录用户的id储存在本地
          // localStorage.id = res.data.id;
          localStorage.setItem("info", res.data.id);
          // 将当前用户的权限储存到本地
          localStorage.role = res.data.role;
          // 将当前用户登录的token值存到本地
          localStorage.token = res.data.token;
          // 先存值,再跳转到指定页面,不然会报错
          this.$router.push("/index/outindex");
          // 登录成功提示框
          this.$message({
            message: "老雷火锅店后台登录成功",
            type: "success",
          });

          // console.log(res.data.role);
          // console.log(res.data.token);
        } else {
          this.show = true;
        }
      });
    },
    // 验证失败
    onFail() {
      this.$message({
        message: "警告哦，滑动验证错误",
        type: "warning",
      });
    },
    // 刷新验证
    onRefresh() {
      this.$message("刷新验证码");
    },
    // 点击登录显示验证框
    loginuser() {
      this.showverify = true;
    },
  },
};
</script>

<style lang="less" scoped>
@import url("../assets/styles/themes.less");
.login-main {
  background-image: url(../assets/imgs/bcimg.png);
  background-repeat: no-repeat;
  background-size: 800px;
  background-position: 10% 25%;
  width: 100%;
  height: 100%;
  background-color: @basecolor;
  .login-container {
    width: 300px;
    height: 300px;
    position: absolute;
    top: 50%;
    left: 65%;
    margin-top: -150px;
    text-align: center;
    .login-bad {
      color: red;
    }
    p {
      margin: 20px 0;
    }
    .login-sys {
      color: @tintcolor;
      font-size: 20px;
      font-weight: bold;
    }
    .login-bad {
      position: absolute;
      top: -10px;
      left: 20%;
    }
    .login-login {
      width: 100%;
      background-color: @basecolor2;
      margin-top: 20px;
      border: 0;
    }
  }
  .verify {
    position: absolute;
    top: 32%;
    left: 65%;
  }
}
</style>